<template>
    <div>
        <h3>index页面</h3>
        <!-- 使用全局组件 -->
        <search>
            <span slot="left">首页</span>
            <span slot="right">搜索</span>
        </search>
        <search>查询</search>
        <search>查看</search>
        <div>price:{{ price.toFixed(2) }}</div>
        <div>price:{{ price | transPrice(3) }}</div>
        <div id="box" ref="mybox">
            box
        </div>
        <button @click="getbox">获取box盒子</button>
        <v-one ref="one"></v-one>
        <button @click="getOne">获取one子组件</button>
    </div>
</template>

<script>
import vOne  from  "./components/one.vue"
export default {
        components:{
            vOne
        },
        data(){
            return {
                price:99
            }
        },
        methods:{
            getbox(){
                // 原生js的方法
                // var box = document.getElementById("box");
                // console.log(box);
                // vue提供的方式 ref
                // console.log(this.$refs.mybox); 
            },
            getOne(){
                console.log(this.$refs.one.msg);
            }
        }
    }
</script>

<style  scoped>

</style>